{% extends "skeleton.html" %}

{% block header %}
  <style>
    div.profile-field {
      position: relative;
      height: 20pt;
      line-height: 20pt;
    }
    div.profile-field div {
      display: block;
      position: absolute;
      top: 0;
      left: 90pt;
      right: 0;
    }
    div.profile-field div.input-button {
      display: inline-block;
      position: static;
      margin-left: 90pt;
    }
    div.profile-field input[type=text] {
      width: 80%;
    }
    div.profile-field select {
      width: 80%;
    }

    form {
      padding-bottom: 5em;
    }
  </style>
  <script src="/js/v{{resource_version}}/autocomplete.js"></script>
{% endblock %}
{% block pagetitle %}Profile{% endblock %}
{% block title %}Profile{% endblock %}
{% block headerlinks %}{% endblock %}

{% block maincontent %}
  <section class="content">
    <nav class="breadcrumbs">
      <ul>
        <li><a href="/">War Worlds</a>
        <li><span>Profile</span>
      </ul>
    </nav>

    <h1>Profile</h1>
    <p>Your profile is how you appear to other users of the War Worlds website. It's probably a good idea to link your
    profile to your empire in the game below, which will allow people to recognize you in the forums as well as in the
    game. You also get extra features like being able to see your in-game stats on your posts and so on.</p>

    <form method="POST">
      <h2>Linked Empire</h2>
      <p>If you've logged in to the website with the Google Account you use in the game, your empire list will be
      auto-populated. However, if you use a different email address in the game, you can still link to your empire
      by typing the name in the box below and clicking "Associate". In this case, you'll need to verify that you
      actually own that empire by clicking a link in an email sent to that email account.</p>
      <div class="profile-field">
        <label for="linked_empire">Empire:</label>
        <div><select name="linked_empire" id="linked_empire">
          <option value="">None</option>
          {% if empires|length == 1 %}
            {% for realm_name, empire in empires.iteritems() %}
              <option value="{{realm_name}}:{{empire.key}}">{{empire.display_name}}</option>
            {% endfor %}
          {% else %}
            {% for realm_name, empire in empires.iteritems() %}
              <option value="{{realm_name}}:{{empire.key}}">{{realm_name}}: {{empire.display_name}}</option>
            {% endfor %}
          {% endif %}
        </select></div>
      </div>
      <hr />
      <div class="profile-field">
        <input type="hidden" name="empire_id" id="empire_id">
        <div><input type="text" name="empire_name" id="empire_name"></div>
      </div>
      <div class="profile-field">
        <div class="input-button"><input type="button" id="associate_empire" value="Associate" /></div>
      </div>

      <h2>Display Preferences</h2>
      <p>If you don't want to link your account here to your empire, you can select "None" from the list above
      and choose a display name here.</p>

      <div class="profile-field">
        <label for="display_name">Display Name:</label>
        <div><input type="text" name="display_name" id="display_name" value="" placeholder=""></div>
      </div>

      <div class="profile-field">
        <div class="input-button"><input type="submit" value="Save"></div>
      </div>
    </form>
  </section>
  <script>
    $(function() {
      $("select").on("change", function() {
        if ($(this).val() == "") {
          $("#display_name").prop("disabled", false);
        } else {
          $("#display_name").prop("disabled", true);
        }
      });

      var selectedEmpire = "{{user_profile.realm_name}}:{{user_profile.empire_id}}";
      if (selectedEmpire != ":") {
        $("select").val(selectedEmpire).change();
      }
      $("#display_name").val("{{user_profile.display_name}}");

      $("#empire_name").autocomplete({
        url: "/profile/empire-autocomplete",
        showResult: function(value, data) {
          return value;
        },
        onItemSelect: function(item) {
          $("#empire_id").val(item.value+"|"+item.data[0]);
        },
        useCache: false
      });

      $("#associate_empire").click(function(evnt) {
        evnt.preventDefault();
        var value = $("#empire_id").val().split("|");
        if (!value || value.length != 2) {
          alert("You need to choose a empire name from the autocomplete list.");
          return;
        }
        if (confirm("We need to confirm you own the empire "+value[0]+", which we will do by sending an "+
                    "email to the email address associated with that empire. Are you sure you want to continue?")) {
          $("#associate_empire").prop("disabled", true).parent().addClass("disabled");
          $.ajax({
            url: "/profile/empire-associate",
            type: "POST",
            data: {empire_id: value[1]},
            success: function(data, status, xhr) {
              $("#associate_empire").prop("disabled", false).parent().removeClass("disabled");
              if (data.substr(0, 4) == "ERR:") {
                alert("The follow error occurred and your profile could not be associated with the given empire.\r\n\r\n"+data.substr(4));
              } else {
                alert("An email has been sent, please check your inbox and click the link to complete the process.");
              }
            },
            error: function() {
              $("#associate_empire").prop("disabled", false).parent().removeClass("disabled");
                alert("An unexpected error occurred and your profile could not be associated with the given empire. Please try again later.");
            }
          });
        } 
      });
    });
  </script>
{% endblock %}